<template>
  <div
    :id="domBoxId"
    ref="chartBox"
    class="main"></div>
</template>

<script lang="ts" setup>
import { onMounted, computed, onBeforeUnmount } from 'vue';
import { controller } from "@/engine/Controller";
import { ipcRenderer } from "electron";
import { SimFrameToSubChannel } from '@/engine/types/Win';
import { TimeSeryUpdate } from '@/engine/types/charts';

const domBoxId = computed(() => `box_id`);
const updateChart = async (event: Event, data: TimeSeryUpdate) => {
  if (data.isDirect) {
    controller.chartsService.timeSeryService.update(data.values!);
  } else {
    await controller.chartsService.timeSeryService.updateTimeSeryChart(data);
  }
};

onMounted(() => {
  ipcRenderer.on(SimFrameToSubChannel.UpdateChartsData, updateChart);
});

onBeforeUnmount(() => {
  ipcRenderer.off(SimFrameToSubChannel.UpdateChartsData, updateChart);
});

</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
}
</style>
